import React from 'react';
import { useRecoilState } from 'recoil';
import { editorVideo } from '../../../../recoil/editor';
import { videoList } from './constant';
import classnames from 'classnames';
import $style from './style.module.less';

interface IProps {}

export const Source: React.FC<IProps> = props => {
  const [videoIndex, setVideoIndex] = useRecoilState(editorVideo);

  const { index } = videoIndex;
  const handleChangeIndex = (i: number) => {
    setVideoIndex({
      index: i,
      url: videoList[i] || '/demon.mp4',
    });
  };

  return (
    <div className={$style.sourceWrapper}>
      {videoList.map((item, i) => {
        return (
          <div
            key={i}
            className={classnames($style.videoSourceItem, i === index && $style.activeItem)}
            onClick={() => handleChangeIndex(i)}
          >
            <img src='https://p3-sign.douyinpic.com/tos-cn-v-96b78a/5fdd06a79a70490f81259d2feb38368a~tplv-noop.image?x-expires=1652617619&x-signature=OAL8b33diXSiCkRC16l4d2f5waE%3D' />
          </div>
        );
      })}
    </div>
  );
};
